<template>
  <div>
    <el-dialog
      title="添加商品"
      :visible.sync="showDialog"
      width="900px"
      :before-close="closeDialog"
    >
      <div class="content">
        <el-form
          :inline="true"
          :model="formData"
          ref="formData"
          class="demo-form-inline"
        >
          <el-form-item prop="productName">
            <el-input
              v-model="formData.productName"
              placeholder="请输入商品名称"
              size="mini"
            />
          </el-form-item>
          <el-form-item prop="productType">
            <el-select
              v-model="formData.productType"
              placeholder="请选择商品类型"
              size="mini"
            >
              <el-option label="商城商品" value="MALL"></el-option>
              <el-option label="预定商品" value="BOOKING"></el-option>
              <el-option label="餐饮商品" value="CAN_YIN"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="getData(1)"
              >搜索</el-button
            >
            <el-button size="mini" type="" @click="resetForm('formData')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%" height="400">
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="price" label="分类">
            <template slot-scope="scope">
              <span v-for="(item, index) in scope.row.categoryName" :key="item"
                >{{ item
                }}{{
                  index == scope.row.categoryName.length - 1
                    ? ""
                    : "&nbsp;&nbsp;>&nbsp;&nbsp;"
                }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="价格（元）">
            <template slot-scope="scope">
              {{ (scope.row.price / 100).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              {{ typeOptions[scope.row.productType] }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot="header" slot-scope="scope">
              <el-checkbox v-model="isAll" @change="changeBox($event, '')">{{
                isAll ? "全不选" : "全选"
              }}</el-checkbox>
            </template>
            <template slot-scope="scope">
              <div>
                <el-checkbox
                  :value="isSelected(scope.row)"
                  @change="changeBox($event, scope.row)"
                  >{{ isSelected(scope.row) ? "已选择" : "选择" }}</el-checkbox
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination-direction
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="saveData()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getProductsByType,
  getChooseProducts,
  productSaveOrUpdate,
} from "@/api/vip";
export default {
  data() {
    return {
      showDialog: false,
      formData: {
        productName: "",
        productType: "",
      },
      isAll: false,
      tableData: [],
      paginationConfig: {
        direction: "center", // 分页位置
        layout: "total, sizes, prev, pager, next, jumper", // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10, // 每页条数-默认10
      },
      typeOptions: {
        MALL: "商城商品",
        BOOKING: "预定商品",
        CAN_YIN: "餐饮商品",
      },
      chooseProducts: [],
      inviteConfigId: "",
    };
  },
  methods: {
    openDialog(arr) {
      this.chooseProducts = arr;
      this.showDialog = true;
      this.getData();
    },
    closeDialog(type) {
      this.showDialog = false;
      this.resetForm("formData");
      this.paginationConfig.page = 1;
    },
    // 单选和全选事件
    changeBox(e, row) {
      // id存在代表是行内单选操作
      if (row) {
        let { productId, productName, productType } = row;
        let falg = false;
        this.chooseProducts.forEach((item, index) => {
          if (
            item.productId == productId &&
            item.productName == productName &&
            item.productType == productType
          ) {
            this.chooseProducts.splice(index, 1);
            falg = true;
          }
        });
        if (!falg) {
          this.chooseProducts.push(row);
        }
        this.isAll = this.isInclude();
      } else {
        this.isAll = e;
        this.changeAllSta(e);
      }
    },
    // 判断每行是否选中状态
    isSelected(row) {
      let { productId, productName, productType } = row;
      var result = this.chooseProducts.some((item) => {
        if (
          item.productId == productId &&
          item.productName == productName &&
          item.productType == productType
        ) {
          return true;
        }
      });
      return result;
    },
    // 判断是否全选
    isInclude() {
      let { tableData, chooseProducts } = this;
      let i = 0;
      chooseProducts.forEach((item) => {
        tableData.forEach((itm) => {
          if (
            item.productId == itm.productId &&
            item.productName == itm.productName &&
            item.productType == itm.productType
          ) {
            i++;
          }
        });
      });
      return i == tableData.length ? true : false;
    },
    // 全选和取消全选操作
    changeAllSta(e) {
      let { tableData, chooseProducts } = this;
      if (!e) {
        // 取消全选
        tableData.forEach((item) => {
          chooseProducts.forEach((sub, index) => {
            if (
              item.productId == sub.productId &&
              item.productName == sub.productName &&
              item.productType == sub.productType
            ) {
              this.chooseProducts.splice(index, 1);
            }
          });
        });
      } else {
        let arr = [...chooseProducts, ...tableData];
        this.chooseProducts = arr.filter((value, index, array) => {
          return (
            array.findIndex(
              (item) =>
                item.productId == value.productId &&
                item.productName == value.productName &&
                item.productType == value.productType
            ) == index
          );
        });
      }
    },
    getData(type) {
      if (type) this.paginationConfig.page = 1;
      let {
        paginationConfig: { page, pageSize },
        formData: { productName, productType },
      } = this;
      let query = {
        pageNum: page,
        pageSize,
        productName,
        productType,
      };
      getProductsByType(query).then((res) => {
        if (res.code == 0) {
          let {
            data,
            data: { pageInfoVo },
          } = res;
          this.formData.productType = data.type;
          this.paginationConfig.total = pageInfoVo.total;
          this.paginationConfig.pageSize = pageInfoVo.pageSize;
          this.paginationConfig.page = pageInfoVo.pageNum;
          this.tableData = pageInfoVo.list;
          this.isAll = this.isInclude();
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getData(1);
    },
    sizesChange() {
      this.getData(1);
    },
    pageChange() {
      this.getData();
    },
    saveData() {
      let { chooseProducts} = this;
      if (chooseProducts.length <= 0) {
        this.$message({
          type: "error",
          message: "请选择商品后再进行保存",
        });
        return;
      }
      this.$emit("dialogClose",{type:'add',chooseProducts});
      this.closeDialog();
      // productSaveOrUpdate({
      //   addProductIds: chooseProducts,
      //   inviteConfigId,
      // }).then((res) => {
      //   if (res.code == 0) {
      //     this.$message({
      //       message: "操作成功",
      //       type: "success",
      //     });
      //     this.closeDialog();
      //     this.$emit("dialogClose");
      //   }
      // });
    },
  },
};
</script>